<template>
  <div>
    <a-modal
      v-model:visible="passwordVisible"
      title="请输入管理员密码"
      :maskStyle="{
        background: '#000000',
      }"
      :closable="false"
      :keyboard="false"
      :maskClosable="false"
      cancelText="null"
      @ok="isAdministrator"
      @cancel="cancel"
    >
      <a-input
        placeholder="请输入管理员密码"
        type="password"
        v-model:value="passwordInput"
      >
        <template #suffix>
          <a-tooltip title="请输入管理员密码">
            <iconpark-icon name="sigh"></iconpark-icon>
          </a-tooltip>
        </template>
      </a-input>
    </a-modal>

    <a-layout>
      <a-layout-header style="background: #fff" class="flex">
        <a-tabs v-model:activeKey="activeKey" centered class="w-100" @change="tabs">
          <a-tab-pane key="itemTable" tab="菜单"></a-tab-pane>
          <a-tab-pane key="menuitemGroupItem" tab="菜单组子菜单"></a-tab-pane>
          <a-tab-pane key="content" tab="文章"></a-tab-pane>
        </a-tabs>
      </a-layout-header>
      <a-layout-content
        class="content-h"
        :style="{
          margin: '24px 30px',
          background: '#fff',
        }"
      >
        <item-table v-if="activeKey === 'itemTable'" />
        <menu-item-grou-item-table
          v-if="activeKey === 'menuitemGroupItem'"
          :tabledata="tableData"
        />
        <content-table v-if="activeKey === 'content'" :tabledata="tableData" />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance, onMounted, onUpdated } from "vue";
import { message } from "ant-design-vue";
import MenuItemGrouItemTable from "./table/menuItemGrouItemTable.vue";
import ContentTable from "./table/ContentTable.vue";
import ItemTable from "./table/ItemTable.vue";
export default defineComponent({
  components: {
    MenuItemGrouItemTable,
    ContentTable,
    ItemTable,
  },
  setup() {
    const tableData = ref([]);
    const passwordVisible = ref(true);
    const passwordInput = ref("");
    const { proxy } = getCurrentInstance();
    const activeKey = ref();

    onMounted(() => {
      if (localStorage.getItem("tabs") === null) {
        activeKey.value = "menuitem";
        localStorage.setItem("tabs", "menuitem");
      } else {
        activeKey.value = localStorage.getItem("tabs");
      }
      getToken();
    });

    onUpdated(() => {
      getToken();
    });

    function getToken() {
      const token = sessionStorage.getItem("token");
      if (token != null) {
        setTimeout(() => {
          passwordVisible.value = false;
          getFirstInfo();
        }, 1000);
      }
    }

    function getFirstInfo() {
      if (activeKey.value !== "itemTable")
        proxy.$api.get(activeKey.value).then((res) => {
          if (res.error === 0) tableData.value = res.message;
          else message.error(res.message);
        });
    }
    function isAdministrator() {
      proxy.$api.post("password", passwordInput.value).then((res) => {
        if (res.error === 0) {
          sessionStorage.setItem("token", res.message);
          passwordVisible.value = false;
          setTimeout(() => {
            getFirstInfo();
          }, 1000);
        } else message.error(res.message);
      });
    }

    function cancel() {
      passwordVisible.value = true;
      localStorage.setItem("menu", "623acf7b639ab1b33452963e");
      setTimeout(() => {
        proxy.$router.push("/home/623acf7b639ab1b33452963e");
      }, 1000);
    }

    function tabs(e) {
      localStorage.setItem("tabs", e);
      if (activeKey.value !== "itemTable")
        proxy.$api.get(activeKey.value).then((res) => {
          if (res.error === 0) tableData.value = res.message;
          else message.error(res.message);
        });
    }
    return {
      passwordVisible,
      passwordInput,
      activeKey,
      tableData,
      tabs,
      isAdministrator,
      cancel,
    };
  },
});
</script>

<style scoped></style>
